<template>
  <div class="travel" ref="travel">

    <div class="t-text">
      <div v-if="props.stats?.travelNumber !== 0">
        <p>
          今年你共出差<span class="strong-word">{{ props.stats?.travelNumber }}</span>次
        </p>
        <p>
          去往了
          <span class="strong-word"> {{ props.stats?.travelCityNumber }}个城市 </span>
        </p>
        <p v-for="(item, index) in props.stats?.travelCities" :key="item">
          <span class="strong-word">{{ item + (index === 2 ? ' ...' : ' ,') }}</span>
        </p>
        <!-- <p>
          超过了整个长安
          <span> {{ props.stats?.travelRate }}%的战友</span>
        </p> -->
        <p>记录着你奋斗的身影</p>

        <!-- <ul class="t-location" v-if="stats?.travelCities.length > 0">
          <li v-for="(i, index) of stats?.travelCities" :key="i" :class="`t-l-text-${index}`">
            {{ i }}
          </li>
        </ul> -->
      </div>
      <Empty v-else />
    </div>

    <img class="t-bg-run" :id="props.stats.sex === '女' ? 't-female' : 't-male'"
      :src="props.stats.sex === '女' ? female : male" alt="" />
    <img class="t-bg-ichangan" src="@/assets/img/travel/fore-ground.jpg" alt="" />
    <!-- <img class="t-bg-light" src="@/assets/img/travel/light.png" alt="" /> -->

  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { slideDown, slideUp } from "@/utils/slide";
import { changeStatusBarColor } from "@/cordova/common";
import female from "@/assets/img/travel/female.jpg";
import male from "@/assets/img/travel/male.jpg";

const props = defineProps<{
  stats: any;
}>();

const emit = defineEmits(["slideUp", "slideDown"]);

onMounted(() => {
  slideUp(travel.value, () => {
    console.log("travel");
    emit("slideUp");
  });

  slideDown(travel.value, () => {
    console.log("travel");
    emit("slideDown");
  });

  if (props.stats?.travelCityNumber === 0) {
    changeStatusBarColor([32, 83, 186, 1]);
  }
});

const travel = ref(null);
</script>

<script lang="ts">
import Empty from "./components/Empty.vue";

export default {
  name: "TavelPage",
  components: {
    Empty,
  },
};
</script>

<style lang="scss" scoped>
.travel {
  @include full-screen-relative;
  font-size: 30px;
  font-family: ChangAnunitype;
  font-weight: 400;
  color: #ffffff;
  line-height: 80px;
}

.t-text {
  @include animation-fade-in;
  position: absolute;
  z-index: 51;
  left: 70px;
  top: 166px;
  color: $text-blue1;
  font-weight: 400;
  line-height: 56px;
}

.t-location {
  position: fixed;
  z-index: 51;
  bottom: 0;
  left: 0;
  height: 1056px;
  width: 100vw;

  li {
    position: fixed;
  }

  .t-l-text-0 {
    right: 53px;
    bottom: 460px;
    font-size: $font-size-key;
  }

  .t-l-text-1 {
    left: 160px;
    bottom: 186px;
    font-size: $font-size-key;
  }

  .t-l-text-2 {
    left: 95px;
    bottom: 335px;
    font-size: 36px;
  }

  .t-l-text-3 {
    left: 88px;
    bottom: 496px;
    font-size: $font-size-key;
  }

  .t-l-text-4 {
    right: 140px;
    bottom: 318px;
    font-size: 36px;
  }
}

.t-bg-run {
  @include animation-fade-in;
  position: fixed;
  z-index: 50;
  bottom: 0;
  // left: 375px;
  width: 75%;
  height: auto;
}

#t-female {
  left: 375px;
  // width: 50%;
}

#t-male {
  left: 0px;
  // width: 100%;
}

.t-bg-ichangan {
  position: fixed;
  // z-index: 48;
  bottom: 0;
  left: 0;
  width: 750px;
  height: 1334px;
}
</style>
